<template>
  <div id="app">
    <div class="mask" :style="{opacity: opacity}" v-show="opacity > 0">
      <div class="biglogo">
        <div class="logo-flash">
          <i class="circle2 animation "></i>
          <i class="circle3 animation2 "></i>
          <img src="./images/monkey.png" />
        </div>
      </div>
    </div>
    <div id="banner">
      <div class="logo">
        <i class="logo-img"></i>
        <span>I'm Monkey</span>
      </div>
      <div class="status">
        <div class="status-light" :class="{'status-running': status === 'Running', 'status-down': status === 'Down'}">
          <i class="circle1" ></i>
          <i class="circle2 animation "></i>
          <i class="circle3 animation2 "></i>
        </div>
        <span>{{status ? status : 'Pending'}}</span>
      </div>
    </div>
    <div id="main">
      <div id="left">
        <Chartboard />
      </div>
      <div id="right">
        <CodeArea v-if="type === 'code'" /> 
        <HtmlArea v-if="type === 'html'" /> 
      </div>
    </div>
  </div>
</template>

<script>
import Chartboard from './components/Chartboard.vue';
import Log from './components/Log.vue';
import CodeArea from './components/Code.vue';
import HtmlArea from './components/HtmlArea.vue';
import EventBus from './lib/eventbus';
import gdemo from './lib/gdemo';

import xxx from '../../client/js/transpiler';
import define from './lib/define';

export default {
  name: 'app',
  data () {
    return {
      opacity: 1,
      status: '',
      type: ''
    };
  },
  components: {
    Chartboard,
    CodeArea,
    HtmlArea
  },
  created () {
    // Create WebSocket connection.
    const socket = new WebSocket('ws://10.30.31.202:6200');

    // Connection opened
    socket.addEventListener('open', (event) => {
      this.status = 'Running'; 
      EventBus.$emit('ws-open');
    });

    socket.addEventListener('close', (event) => {
      this.status = 'Down';
      EventBus.$emit('ws-close');
    });

    // Listen for messages
    socket.addEventListener('message', (event) => {
      EventBus.$emit('ws-data', event.data);
    });

    EventBus.$on('ws-data', (msg) => {
      setTimeout(() => {
        let rst = transpiler.translate(msg);
        console.log(rst);
      }, 500);
    });

    EventBus.$on('ws-open', () => {
      EventBus.$emit('chat-response', 'I\'m Monkey, what can I do for you.');
    });

    let self = this;

    let entity = {
      monkey: {
        name: 'Monkey',
        hi () {
          let interval = setInterval(() => {
            self.opacity = self.opacity - 0.2;
            if (self.opacity <= 0) {
              clearInterval(interval);
            }
          }, 100);
          EventBus.$emit('chat-response', 'Hi, my boss');
        },
        coding () {
          self.type = 'code';
          self.$nextTick(() => {
            EventBus.$emit('chat-response', 'I\'m ready');
            EventBus.$emit('code-open');
          })
        },
        program (...arg) {
          EventBus.$emit('chat-response', 'Ok');
          EventBus.$emit('code-write', arg);
        },
        clean () {
          self.type = 'html';
        },
        draw (...arg) {
          EventBus.$emit('html-draw', arg); 
        }
      }
    };

    transpiler.bootstrap({ define }, entity, {});
/*
    setTimeout(() => {
      entity.monkey.hi.bind(this)();
      entity.monkey.clear.bind(this)();
      this.$nextTick(() => {
        entity.monkey.draw.bind(this)('input', 'input1');
        entity.monkey.draw.bind(this)('input', 'input1');
        entity.monkey.draw.bind(this)('input', 'input1');
        entity.monkey.draw.bind(this)('input', 'input1');
        entity.monkey.draw.bind(this)('input', 'input1');
        entity.monkey.draw.bind(this)('button', 'input1');
        entity.monkey.draw.bind(this)('button', 'input1');
        entity.monkey.draw.bind(this)('img', 'input1');
        entity.monkey.draw.bind(this)('img', 'input1');
        entity.monkey.draw.bind(this)('img', 'input1');
        entity.monkey.draw.bind(this)('img', 'input1');
        entity.monkey.draw.bind(this)('img', 'input1');
        entity.monkey.draw.bind(this)('img', 'input1');
        entity.monkey.draw.bind(this)('img', 'input1');
        entity.monkey.draw.bind(this)('img', 'input1');
      });
    }, 1000)
*/
  }
};
</script>

<style lang="less">
@import './lib/gdemo.css';
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 999;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  .biglogo {
    .logo-flash {
      position: relative;
      img {
        width: 200px;
      }
      i {
        position: absolute;
        display: inline-block;
        width: 250px;
        height: 250px;
        border-radius: 50%;
        background-color: #fff;
      }
      .circle2 {
        background:rgba(0, 140, 255, 0.76);
        border-radius:100%;
        filter:alpha(opacity=60);
        position:absolute;
        top: -25px;
        left: -26px;
        z-index: 1001;
      }
      .circle3 {
       background:#fff;
        border-radius:100%;
        filter:alpha(opacity=40);
        position:absolute;
        top: -10px;
        left: -10px;
        width: 220px;
        height: 220px;
        z-index: 1002;
      }
    }
  }
}

#banner {
  height: 80px;
  background-color: #000;
  position: relative;
  color: #fff;
  font-weight: 700;
  .logo {
    position: absolute;
    left: 20px;
    top: 30px;
    width: 200px;
    height: 30px;
    display: flex;
    align-items: center;
    i {
      background-size: cover;
      background-image: url('./images/monkey.png');
      width: 40px;
      height: 40px;
    }
    span {
      margin-left: 20px;
    }
  }
  .status {
    position: absolute;
    right: 20px;
    top: 30px;
    display: flex;
    align-items: center;
    font-size: 14px;
    width: 100px;
    span { 
      margin-left: 20px;
    }
    .status-light {
      position: relative;
      display: inline-block;
      height: 20px;
      width: 20px;
      i {
        position: absolute;
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
      }
      .circle2 {
        background:rgba(58,150,225,0.4);
        border-radius:100%;
        width:30px;
        height:30px;
        filter:alpha(opacity=40);
        position:absolute;
        top:-5px;
        left:5px;
      }
      i {
        background-color: #ccc;
      }
      &.status-running {
        i {
          background-color: green;
        }
        span {
          color: green;
        }
      }
      &.status-down {
        i {
          background-color: red;
        }
        span {
          color: red;
        }
      }
    }
  }
}

#main {
  overflow-y: scroll;
  display: flex;
  justify-content: space-around;
  height: 100%;
  #left {
    width: 30%;
    height: 100%;
    border: 1px solid #ccc;
    overflow-y: scroll;
  }
  #right {
    width: 70%;
    height: 100%;
    border: 1px solid #ccc;
    overflow-y: scroll;
  }
}


.animation {
	;-webkit-animation:twinkling 2.1s infinite ease-in-out;
	animation:twinkling 2.1s infinite ease-in-out;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
.animation2 {
	;-webkit-animation:twinkling 2.1s infinite ease-in-out;
	animation:twinkling 2.1s infinite ease-in-out;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
@-webkit-keyframes twinkling {
	0% {
	opacity:0.2;
	filter:alpha(opacity=20);
	-webkit-transform:scale(1);
}
50% {
	opacity:0.5;
	filter:alpha(opacity=50);
	-webkit-transform:scale(1.12);
}
100% {
	opacity:0.2;
	filter:alpha(opacity=20);
	-webkit-transform:scale(1);
}
}@keyframes twinkling {
	0% {
	opacity:0.2;
	filter:alpha(opacity=20);
	-webkit-transform:scale(1);
}
50% {
	opacity:0.5;
	filter:alpha(opacity=50);
	-webkit-transform:scale(1.12);
}
100% {
	opacity:0.2;
	filter:alpha(opacity=20);
	-webkit-transform:scale(1);
}
}
</style>
